<template>
    <div class="category-model">
      <div class="category-list">
        <div class="title-container clearfix">
          <div class="title lf" v-show="currentType=='1'">分类管理</div>
          <div class="title lf" v-show="currentType=='2'">分组管理</div>
          <div class="btn lf" style="margin-left: 20px;">
            <el-button @click="addCategory" v-show="currentType=='1'" type="primary">+添加分类</el-button>
            <el-button @click="addGroup" v-show="currentType=='2'" type="primary">+添加分组</el-button>
          </div>
        </div>

        <div id="currentType1" class="table-box" v-show="currentType=='1'">
          <div class="table-box">
            <el-table :data="cateList" >
              <el-table-column type="selection" width="55"></el-table-column>

              <el-table-column label="分类名称" prop="cate_name"></el-table-column>
              <el-table-column type="expand" >
                <template slot-scope="scope">
                  <el-table :data="scope.row.child" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="子类名称" prop="cate_name"></el-table-column>
                    <el-table-column label="ID" prop="gtid"></el-table-column>
                    <el-table-column label="排序权重" prop="sort"></el-table-column>
                    <el-table-column label="商品数量" prop="goods_num"></el-table-column>
                    <el-table-column label="操作" width="140px">
                        <template slot-scope="data">
                          <div class="control">
                            <a @click="handleClickDelCate(data.row.gtid)">删除</a>
                            <span></span>
                            <a @click="handleClickEditChildCate(scope.row.gtid,data.row.gtid)">编辑</a>
                          </div>
                        </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>

              <el-table-column label="ID" prop="gtid"></el-table-column>
              <el-table-column label="排序权重" prop="sort"></el-table-column>
              <el-table-column label="商品数量" prop="goods_num"></el-table-column>
              <el-table-column label="操作" width="200px">
                  <template slot-scope="scope">
                    <div class="control">
                      <a @click="handleClickNewSubclass(scope.row.gtid)">添加子分类</a>
                      <span></span>
                      <a @click="handleClickDelCate(scope.row.gtid)">删除</a>
                      <span></span>
                      <a @click="handleClickEditCate(scope.row.gtid)">编辑</a>
                    </div>
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </div>


        <div id="currentType2" class="table-box" v-show="currentType=='2'">
          <div class="table-box">
            <el-table :data="groupList" >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="分组名称" prop="name"></el-table-column>
              <el-table-column type="expand" >
                <template slot-scope="scope">
                  <el-table :data="scope.row.child" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="子组名称" prop="name"></el-table-column>
                    <el-table-column label="ID" prop="id"></el-table-column>
                    <el-table-column label="排序权重" prop="sort"></el-table-column>
                    <el-table-column label="商品数量" prop="num"></el-table-column>
                    <el-table-column label="操作" width="200px">
                        <template slot-scope="data">
                          <div class="control">
                            <a @click="handleClickDelGroup(data.row.id)">删除</a>
                            <span></span>
                            <a @click="handleClickEditChildGroup(scope.row.id,data.row.id)">编辑</a>
                          </div>
                        </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="ID" prop="id"></el-table-column>
              <el-table-column label="排序权重" prop="sort"></el-table-column>
              <el-table-column label="商品数量" prop="num"></el-table-column>
              <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                  <div class="control">
                    <a @click="handleClickNewChildGroup(scope.row.id)">添加子分组</a>
                    <span></span>
                    <a @click="handleClickDelGroup(scope.row.id)">删除</a>
                    <span></span>
                    <a @click="handleClickEditGroup(scope.row.id)">编辑</a>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>


      </div>
    </div>
</template>
<script>
export default {
  name: "category",
  components: {},
  data() {
    return {
      currentType: "category",
      cateList: [],
      groupList: [],
    };
  },
  created() {
    const currentRouteType = this.$router.currentRoute.params.type;
    this.currentType = this.$route.params.type;
    this.getCategoryList();
    this.getGroupList();
  },
  watch: {
    $route(to, from) {
      this.$nextTick(() => {
        if (to.params.type == "1") {
          this.getCategoryList();
          this.currentType = 1;
        } else {
          this.getGroupList();
          this.currentType = 2;
        }
      });
    }
  },
  mounted() {},
  methods: {
    //添加子分组
    handleClickNewChildGroup(targetId) {
      this.$router.push({
        name: "newChildGroup",
        params: {
          status: "new",
          parentId: targetId,
          currentId: "null"
        }
      });
    },

    //编辑子分组
    handleClickEditChildGroup(parentId, currentId) {
      this.$router.push({
        name: "newChildGroup",
        params: {
          status: "edit",
          parentId: parentId,
          currentId: currentId
        }
      });
    },

    //编辑分组
    handleClickEditGroup(targetId) {
      this.$router.push({
        name: "newGroup",
        params: {
          status: "edit",
          targetId: targetId
        }
      });
    },

    //删除分组
    handleClickDelGroup(targetId) {
      this.$confirm("是否确定删除该分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let formData = new FormData();
          formData.append("id", targetId);
          this.$http(
            "/wgl_admin/index.php?app=group&act=delete",
            "post",
            {},
            {},
            formData,
            success => {
              this.$message.success("删除成功");
              this.getGroupList();
            },
            error => {
              this.$message.error(error.state.msg);
            }
          );
        })
        .catch(() => {});
    },

    //编辑分类
    handleClickEditCate(targetId) {
      this.$router.push({
        name: "newCategory",
        params: {
          status: "edit",
          targetId: targetId
        }
      });
    },

    //编辑子分类
    handleClickEditChildCate(parentId, targetId) {
      this.$router.push({
        name: "newSubclass",
        params: {
          parentId: parentId,
          status: "edit",
          currentId: targetId
        }
      });
    },

    //删除分类
    handleClickDelCate(targetId) {
      this.$confirm("是否确定删除该分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let formData = new FormData();
          formData.append("id", targetId);
          this.$http(
            "/wgl_admin/index.php?app=goods_cate&act=delete",
            "post",
            {},
            {},
            formData,
            success => {
              this.getCategoryList();
              this.$message.success("删除成功");
            },
            error => {
              this.$message.error(error.state.msg);
            }
          );
        })
        .catch(() => {});
    },

    //添加子分类
    handleClickNewSubclass(targetId) {
      this.$router.push({
        name: "newSubclass",
        params: {
          parentId: targetId,
          status: "new",
          currentId: "null"
        }
      });
    },

    //添加分类
    addCategory() {
      this.$router.push({
        name: "newCategory",
        params: {
          status: "new",
          targetId: "null"
        }
      });
    },

    //添加分组
    addGroup() {
      this.$router.push({
        name: "newGroup",
        params: {
          status: "new",
          targetId: "null"
        }
      });
    },

    //点击切换类型
    handleClickChangeType(data) {
      this.$router.push({
        name: "category",
        params: {
          type: data.type
        }
      });
      this.currentType = data.type;
    },

    //获取分类列表
    getCategoryList() {
      // /wgl_admin/index.php?app=goods_cate&act=get_cate_list
      this.$http(
        "/wgl_admin/index.php?app=goods_cate&act=get_cate_list",
        "get",
        {},
        { cate_id: "", from: "cate_list" },
        {},
        success => {
          this.cateList = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //获取分组列表
    getGroupList() {
      this.$http(
        "/wgl_admin/index.php?app=group&act=lists",
        "get",
        {},
        {},
        {},
        success => {
          this.groupList = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.category-model {
  width: 100%;
  height: 100%;
  padding-left: 118px;
  position: relative;
  .category-list {
    padding: 30px 58px 30px 50px;
    .title-container {
      max-width: 1466px;
      width: 100%;
      margin-bottom: 30px;
      .title {
        font-size: 22px;
        color: #333;
        height: 100%;
      }
    }
  }
}
.control {
  > a {
    color: #6499f5;
    font-size: 12px;
    cursor: pointer;
    position: relative;
  }
  > span:after {
    content: "|";
    display: inline;
    color: #b7bdc9;
  }
}
.pagination {
  width: 1466px;
  text-align: right;
  margin-top: 46px;
}
.table-box {
  width: 100%;
  // max-width: 1466px;
}
</style>
